/* 低龄儿童 */
<template>
	<div class='store-role2'>
		<TopNav
			showInform
			showBack
			:showTitle="false"
			backColor="#01937C"
			color="#00493E"
			msgColor="#01937C"
		>
			<span class="nav-title">
				分享社区
			</span>
		</TopNav>
		<!-- 左侧 分类 -->
		<div class="left">
			<Button
				class="item"
				v-for="item in types"
				:key="item.value"
				:bgColor="item.value === selectType ? '#00C9A9' : '#EFF3F3'"
				:color="item.value === selectType ? '#ffffff' : 'rgba(0,0,0,0.55)'"
				width="250"
				height="150"
				@click="selectType=item.value"
			>
				{{item.label}}
			</Button>
		</div>
		<!-- 右侧 -->
		<div class="right">
			<Community
				column="3"
				:type="selectType"
			/>
		</div>
		<img
			class="add-btn"
			src="https://aha-public-1301319986.cos.ap-shanghai.myqcloud.com/static_file/yuping/20220312095227997-Group 82 (1).png"
			@click="onclickAddBtn"
		>
		<DonateModel
			v-if="showDonateModel"
			@close="showDonateModel=false"
		/>
		<ExchangeModel
			v-if="showExchangeModel"
			@close="showExchangeModel=false"
		/>
	</div>
</template>

<script>
import DonateModel from './components/DonateModel'
import ExchangeModel from './components/ExchangeModel'
export default {
  components: {
    DonateModel,
    ExchangeModel
  },
  data() {
    return {
      types: [
        { label: '玩具捐赠', value: 'donate' },
        { label: '玩具交换', value: 'exchange' },
        { label: '孩子发布', value: 'publish' },
      ],
      selectType: this.$route.query.type || 'donate',
      showDonateModel: false,
      showExchangeModel: false,
    }
  },
  watch: {
    selectType: function() {
      this.$replaceTo(this.$route.name, { type: this.selectType })
    }
  },
  methods: {
    onclickAddBtn() {
      if (this.selectType === 0) {
        this.showDonateModel = true
      } else {
        this.showExchangeModel = true
      }
    }
  }
}
</script>

<style lang='scss' scoped>
.store-role2 {
  display: flex;
  padding: 78px 40px 0;
  background-color: #ffffff;

  .nav-title {
    position: absolute;
    left: 360px;
  }

  .add-btn {
    position: fixed;
    right: 30px;
    bottom: 50px;
    z-index: 100;
    width: 80px;
    cursor: pointer;
  }

  .left {
    padding-right: 60px;
    font-size: $sMini;
    color: $color1;
    border-right: 2px solid rgba(0, 62, 52, 0.08);

    .item {
      display: block;
      margin-bottom: 26px;
    }
  }

  .right {
    padding: 0 0 50px 50px;
  }
}
</style>
